body {
    margin: 0;
    display: flex;
    height: 100vh; /* 设置页面高度 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

.sidebar { /*导航*/
    width: 20%; /* 左侧导航宽度为页面的五分之一 */
    background: linear-gradient(135deg, #cfe1f5, #eaf1fb);; /* 浅蓝白渐变 */
    color: white;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}

.content { /*主体内容*/
    width: 80%; /* 主内容区宽度为页面的五分之四 */
    padding: 20px;
    box-sizing: border-box; /* 包含内边距和边框 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    background: linear-gradient(to right, #99CCff, #ffffff);
    position: relative;

}

.hidden {
transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    display: none; /* 隐藏导航 */
}

.button1 { /*导航中的按钮样式*/
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: flex-start;
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    border: none; /* 不显示边框 */
    background-color: transparent; /* 背景颜色透明 */
    color: rgb(128, 128, 128); /* 初始文本颜色为灰色 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    border-radius: 5px; /* 圆角半径 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    width: 19.5vw;

}

a {
    text-decoration: none; /* 去掉下划线 */

}

.button1-icon {
    width: 30px; /* 图标宽度 */
    margin-right: 10px; /* 图标与文本之间的间距 */
}


.button1:hover {
    background-color: #d3d3d3; /* 悬停时背景色为浅灰色 */
    color: #336699; /* 悬停时文本颜色变为蓝色 */
    font-weight: bold;

}


.button4 { /*隐藏导航按钮样式*/
    width: 30px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    background-color: #d3d3d3; /* 按钮背景色 */
    border: none; /* 去掉边框 */
    border-radius: 50%; /* 圆形按钮 */
    display: flex; /* 启用flex布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    cursor: pointer; /* 鼠标悬停时变成手型 */
    transition: background-color 0.3s, color 0.3s;
}

.button4:hover {
    background-color: rgb(128, 128, 128);
}

.button4-icon {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
}
.logo { /*导航左上角的深蓝色方块*/
    left: 0;
    width: 60px; /* 方块的宽度 */
    height: 60px; /* 方块的高度 */
    border-radius: 10px; /* 圆角 */
    margin-right: 10px; /* 方块和标题之间的间距 */
}

.title {
    position: absolute;
    font-size: 20px;
    color: #336699; /* 标题字体大小 */
    font-weight: bold;
    display: inline;
    top: 5px;
    left: 70px;
}

.underline {/*导航中下划线样式*/
    width: 100%; /* 下划线全宽 */
    height: 2px; /* 下划线高度 */
    background-color: rgb(128, 128, 128); /* 灰色下划线 */
}

h2 {
    font-size: 24px;
    font-weight: bold;
    color: #0172bc;
    margin-bottom: 50px;
}

/* 文件上传区域 */
.upload-box {
    background-color: #eaf1fb;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    height: 58%;
}

.drag-area {
    margin-top: 20px;
    border: 2px dashed #a3c8f0;
    border-radius: 10px;
    padding: 60px;
    text-align: center;
    background-color: #e6f2fc;
    margin-bottom: 20px;
}

.icon img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.drag-area p {
    font-size: 16px;
    color: #6a6b6b;
}

.browse-link {
    color: #6a6b6b;
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
}

.browse-link:hover {
    color: #004d99;
}

#file-name {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

small {
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #6a6b6b;
}

/* 示例下载区域 */
.example-box {
    background-color: #e6e6e6;
    padding: 20px;
    display: block;
    /*align-items: center;*/
    justify-content: space-between;
    border-radius: 10px;
    margin-bottom: 20px;
}

.example-icon {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 使内容分散对齐，图标和文本靠左，按钮靠右 */
    margin-bottom: 10px;  /* 给图标和文本之间留出空间 */
}

.example-icon img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.exa1{
    /*margin: 0;*/
    font-size: 16px;
    font-weight: bold;
    color: #6a6b6b;
}

.example-text{
    display: block;
    margin-top: 10px;
}

.exa2{
    margin: 0;
    font-size: 14px;
    color: #6a6b6b;
}

.download-btn {
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    background-color: #fafafa;
    color: #5a5a5a;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto; /* 使按钮靠右 */
    align-self: center; /* 确保按钮垂直居中 */
    border: 2px solid #cccccc; /* 添加2px的灰色边框 */
}

.download-btn:hover {
    background-color: #e6f2fc;
}

/* 上传按钮 */
.upload-btn {
    padding: 12px 65px;
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    margin-top: 50px;
}

.upload-btn:hover {
    background-color: #005bb5;
}

/* 样式用于成功消息 */
.messages .success {
    margin-top: 20px;
    border-radius: 10px;
    color: #27d888;
    background-color: #e6ffe6;
    padding: 10px;
    margin-bottom: 15px;
}

/* 样式用于错误消息 */
.messages .error {
    margin-top: 20px;
    border-radius: 10px;
    color: #fa4058;
    background-color: #ffe6e6;
    padding: 10px;
    margin-bottom: 15px;
}

.messages {
    transition: opacity 1s ease-out;
}

.messages.hide {
    opacity: 0;
    pointer-events: none;  /* 防止用户在隐藏过程中点击消息 */
}


